
.context{
    position: absolute;
    display: block;
    visibility: hidden;
    background-color: #fff;
    width: 80%;
    top:100px;
    left: 50%;
    transform: translateX(-50%) ;
    height: auto;
    max-height: 700px;
    /*overflow: auto;*/
    z-index: 5;
}
.context h2{
    width: 100%;
    height: 40px;
    font-size: 22px;
    text-align: center;
}
.context .province{
    /*position: absolute;*/
    display: inline;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #a0281a;
}
.context .city,
.context .traintype{
    /*position: absolute;*/
    display: inline;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #25a039;
}
.context .province ul,
.context .city ul,
.context .traintype ul{
    list-style-type: none;
    margin: 5px 0px 5px 0px;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}
.context .province li ,
.context .city li ,
.context .traintype li{
    float:left;
}
li .checkbox{
    width: 50px;
    height: 25px;
    margin:5px 10px;
    position:relative;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #888;
    transition: all 0.5s;
}
li h4{

    /*position: absolute;*/
    left:5%;
    top:50%;
    transform: translateY(50%);

}
li .pro{
    visibility:hidden;
}
li label{
    cursor:pointer;
    position:absolute;
    width:50px;
    height:25px;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    /*background:#fff;*/
    /*border:2px solid #fff;*/
    text-align: center;
    border-radius:5px;
    background-color: rgba(1,1,1,0);
}
li input[type=checkbox]:hover + label{
    border: 1px solid #6778dc;
    box-shadow: 0 0 10px #6778dc;
}
li input[type=checkbox]:checked + label{
    color: #fff;
    background:#6778dc;
}

/*查询按钮和全选按钮*/
.btn-find{
    width: 100px;
    height: 25px;
    color: #fff;
    transform: translateY(5px);
    display: inline;
    float: right;
    background-color: #6c9cff;
    border: 0;
    margin: 1px 10px 0 auto;
    border-radius: 5px;
    transition:all  0.5s;
}
.btn-find:hover{
    transform: scale(1.1) translateY(5px);
    box-shadow: 0 0 12px #6c9cff;
}

.context .tab{
    height: auto;
    width: 100%;
    max-height:440px;
    overflow-y: auto;
}
/*表格*/
.tab table {
    /*position: inherit;*/
    /*display: contents;*/
    border-collapse: collapse;
    width: 100%;

    /*display: flex;*/
    /*justify-content: center; !*水平方向的居中*!*/
    /*align-items: center; !*垂直方向的居中*!*/

}

.tab th, td {
    text-align: left;
    padding: 8px;
}

.tab tr:nth-child(odd){background-color: #f2ece7;}
.tab tr:nth-child(even) {background-color: #f2f2f2;}

.show .h-h{
    display: inline;
    width: 300px;
    margin: 5px;
}
.show .h-h h5{
    margin: 5px 5px 5px 10px;
    display: inline;
}
.show .h-h div{
    display: inline-block;
    margin: 5px;
    width: 20px;
    transform: translateY(10px);
    height: 20px;
    border-radius: 10px;
    border: 0;
}
.show .h-h #red-rect{
    background-color: red;
}
.show .h-h #green-rect{
    background-color: green;
}
.show .h-h #hui-rect{
    background-color: gray;
}
/*.page .context{*/
/*    position: absolute;*/
/*    width: 80%;*/
/*    top:50%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%) translateY(-50%);*/
/*    visibility: hidden;*/
/*    background-color: #fff;*/
/*}*/
/*.context h2{*/
/*    width: 100%;*/
/*    height: 40px;*/
/*    font-size: 22px;*/
/*    text-align: center;*/
/*}*/
/*.context .province{*/
/*    !*position: absolute;*!*/
/*    display: inline;*/
/*    width: 90%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    background-color: #a0281a;*/
/*}*/
/*.context .city,*/
/*.context .traintype{*/
/*    !*position: absolute;*!*/
/*    display: inline;*/
/*    width: 90%;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    background-color: #25a039;*/
/*}*/
/*.context .province ul,*/
/*.context .city ul,*/
/*.context .traintype ul{*/
/*    list-style-type: none;*/
/*    margin: 5px 0px 5px 0px;*/
/*    padding: 0;*/
/*    overflow: hidden;*/
/*    background-color: #fff;*/
/*}*/
/*.context .province li ,*/
/*.context .city li ,*/
/*.context .traintype li{*/
/*    float:left;*/
/*}*/
/*li .checkbox{*/
/*    width: 50px;*/
/*    height: 25px;*/
/*    margin:5px 10px;*/
/*    position:relative;*/
/*    background-color: #fff;*/
/*    border-radius: 5px;*/
/*    border: 1px solid #888;*/
/*    transition: all 0.5s;*/
/*}*/
/*li h4{*/

/*    !*position: absolute;*!*/
/*    left:5%;*/
/*    top:50%;*/
/*    transform: translateY(50%);*/

/*}*/
/*li .pro{*/
/*    visibility:hidden;*/
/*}*/
/*li label{*/
/*    cursor:pointer;*/
/*    position:absolute;*/
/*    width:50px;*/
/*    height:25px;*/
/*    top:50%;*/
/*    left:50%;*/
/*    transform: translateX(-50%) translateY(-50%);*/
/*    !*background:#fff;*!*/
/*    !*border:2px solid #fff;*!*/
/*    text-align: center;*/
/*    border-radius:5px;*/
/*    background-color: rgba(1,1,1,0);*/
/*}*/
/*li input[type=checkbox]:hover + label{*/
/*    border: 1px solid #6778dc;*/
/*    box-shadow: 0 0 10px #6778dc;*/
/*}*/
/*li input[type=checkbox]:checked + label{*/
/*    color: #fff;*/
/*    background:#6778dc;*/
/*}*/

/*!*查询按钮和全选按钮*!*/
/*.btn-find{*/
/*    width: 100px;*/
/*    height: 25px;*/
/*    color: #fff;*/
/*    transform: translateY(5px);*/
/*    display: inline;*/
/*    float: right;*/
/*    background-color: #6c9cff;*/
/*    border: 0;*/
/*    margin: 1px 10px 0 auto;*/
/*    border-radius: 5px;*/
/*    transition:all  0.5s;*/
/*}*/
/*.btn-find:hover{*/
/*    transform: scale(1.1) translateY(5px);*/
/*    box-shadow: 0 0 12px #6c9cff;*/
/*}*/

/*!*表格*!*/
/*.tab table {*/
/*    border-collapse: collapse;*/
/*    width: 100%;*/
/*}*/

/*.tab th, td {*/
/*    text-align: left;*/
/*    padding: 8px;*/
/*}*/

/*.tab tr:nth-child(odd){background-color: #8aeff2;}*/
/*.tab tr:nth-child(even) {background-color: #f2f2f2;}*/

/*.show .h-h{*/
/*    display: inline;*/
/*    width: 300px;*/
/*    margin: 5px;*/
/*}*/
/*.show .h-h h5{*/
/*    margin: 5px 5px 5px 10px;*/
/*    display: inline;*/
/*}*/
/*.show .h-h div{*/
/*    display: inline-block;*/
/*    margin: 5px;*/
/*    width: 20px;*/
/*    transform: translateY(10px);*/
/*    height: 20px;*/
/*    border-radius: 10px;*/
/*    border: 0;*/
/*}*/
/*.show .h-h #red-rect{*/
/*    background-color: red;*/
/*}*/
/*.show .h-h #green-rect{*/
/*    background-color: green;*/
/*}*/
/*.show .h-h #hui-rect{*/
/*    background-color: gray;*/
/*}*/